<template>
  <div class="p-2">
    <transition>
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="配置key" prop="configKey">
              <el-input v-model="queryParams.configKey" placeholder="配置key" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="桶名称" prop="bucketName">
              <el-input v-model="queryParams.bucketName" placeholder="请输入桶名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="是否默认" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                <el-option key="0" label="是" value="0" />
                <el-option key="1" label="否" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="hover">
      <template slot="header">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-hasPermi="['system:ossConfig:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-hasPermi="['system:ossConfig:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">
              修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-hasPermi="['system:ossConfig:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">
              删除
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @query-table="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="ossConfigList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column v-if="columns[0].visible" label="主建" align="center" prop="ossConfigId" />
        <el-table-column v-if="columns[1].visible" label="配置key" align="center" prop="configKey" />
        <el-table-column v-if="columns[2].visible" label="访问站点" align="center" prop="endpoint" width="200" />
        <el-table-column v-if="columns[3].visible" label="自定义域名" align="center" prop="domain" width="200" />
        <el-table-column v-if="columns[4].visible" label="桶名称" align="center" prop="bucketName" />
        <el-table-column v-if="columns[5].visible" label="前缀" align="center" prop="prefix" />
        <el-table-column v-if="columns[6].visible" label="域" align="center" prop="region" />
        <el-table-column v-if="columns[7].visible" label="桶权限类型" align="center" prop="accessPolicy">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.accessPolicy === '0'" type="warning">private</el-tag>
            <el-tag v-if="scope.row.accessPolicy === '1'" type="success">public</el-tag>
            <el-tag v-if="scope.row.accessPolicy === '2'" type="info">custom</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[8].visible" label="是否默认" align="center" prop="status">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding">
          <template slot-scope="scope">
            <el-tooltip content="修改" placement="top">
              <el-button v-hasPermi="['system:ossConfig:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button v-hasPermi="['system:ossConfig:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :total="total" @pagination="getList" />
    </el-card>

    <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
      <el-form ref="ossConfigFormRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="配置key" prop="configKey">
          <el-input v-model="form.configKey" placeholder="请输入配置key" />
        </el-form-item>
        <el-form-item label="访问站点" prop="endpoint">
          <el-input v-model="form.endpoint" placeholder="请输入访问站点" />
        </el-form-item>
        <el-form-item label="自定义域名" prop="domain">
          <el-input v-model="form.domain" placeholder="请输入自定义域名" />
        </el-form-item>
        <el-form-item label="accessKey" prop="accessKey">
          <el-input v-model="form.accessKey" placeholder="请输入accessKey" />
        </el-form-item>
        <el-form-item label="secretKey" prop="secretKey">
          <el-input v-model="form.secretKey" placeholder="请输入秘钥" show-password />
        </el-form-item>
        <el-form-item label="桶名称" prop="bucketName">
          <el-input v-model="form.bucketName" placeholder="请输入桶名称" />
        </el-form-item>
        <el-form-item label="前缀" prop="prefix">
          <el-input v-model="form.prefix" placeholder="请输入前缀" />
        </el-form-item>
        <el-form-item label="是否HTTPS">
          <el-radio-group v-model="form.isHttps">
            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="桶权限类型">
          <el-radio-group v-model="form.accessPolicy">
            <el-radio value="0">private</el-radio>
            <el-radio value="1">public</el-radio>
            <el-radio value="2">custom</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="域" prop="region">
          <el-input v-model="form.region" placeholder="请输入域" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOssConfig,
  getOssConfig,
  delOssConfig,
  addOssConfig,
  updateOssConfig,
  changeOssConfigStatus
} from '@/api/system/ossConfig';
import { mapState } from 'vuex';

export default {
  name: 'OssConfig',
  data() {
    return {
      ossConfigList: [],
      buttonLoading: false,
      loading: true,
      showSearch: true,
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      dialog: {
        visible: false,
        title: ''
      },
      columns: [
        { key: 0, label: '主建', visible: true },
        { key: 1, label: '配置key', visible: false },
        { key: 2, label: '访问站点', visible: true },
        { key: 3, label: '自定义域名', visible: true },
        { key: 4, label: '桶名称', visible: true },
        { key: 5, label: '前缀', visible: true },
        { key: 6, label: '域', visible: true },
        { key: 7, label: '桶权限类型', visible: true },
        { key: 8, label: '状态', visible: true }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        configKey: '',
        bucketName: '',
        status: ''
      },
      form: {
        ossConfigId: undefined,
        configKey: '',
        accessKey: '',
        secretKey: '',
        bucketName: '',
        prefix: '',
        endpoint: '',
        domain: '',
        isHttps: 'N',
        accessPolicy: '1',
        region: '',
        status: '1',
        remark: ''
      },
      rules: {
        configKey: [{ required: true, message: 'configKey不能为空', trigger: 'blur' }],
        accessKey: [
          { required: true, message: 'accessKey不能为空', trigger: 'blur' },
          { min: 2, max: 200, message: 'accessKey长度必须介于 2 和 100 之间', trigger: 'blur' }
        ],
        secretKey: [
          { required: true, message: 'secretKey不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: 'secretKey长度必须介于 2 和 100 之间', trigger: 'blur' }
        ],
        bucketName: [
          { required: true, message: 'bucketName不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: 'bucketName长度必须介于 2 和 100 之间', trigger: 'blur' }
        ],
        endpoint: [
          { required: true, message: 'endpoint不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: 'endpoint名称长度必须介于 2 和 100 之间', trigger: 'blur' }
        ],
        accessPolicy: [{ required: true, message: 'accessPolicy不能为空', trigger: 'blur' }]
      }
    };
  },
  computed: {
    ...mapState(['sys_yes_no'])
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await listOssConfig(this.queryParams);
      this.ossConfigList = res.rows;
      this.total = res.total;
      this.loading = false;
    },
    cancel() {
      this.dialog.visible = false;
      this.reset();
    },
    reset() {
      this.form = { ...this.form };
      this.$refs.ossConfigFormRef.resetFields();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryFormRef.resetFields();
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ossConfigId);
      this.single = selection.length !== 1;
      this.multiple = selection.length === 0;
    },
    handleAdd() {
      this.reset();
      this.dialog.visible = true;
      this.dialog.title = '添加对象存储配置';
    },
    async handleUpdate(row) {
      this.reset();
      const ossConfigId = row?.ossConfigId || this.ids[0];
      const res = await getOssConfig(ossConfigId);
      Object.assign(this.form, res.data);
      this.dialog.visible = true;
      this.dialog.title = '修改对象存储配置';
    },
    async submitForm() {
      this.$refs.ossConfigFormRef.validate(async (valid) => {
        if (valid) {
          this.buttonLoading = true;
          try {
            if (this.form.ossConfigId) {
              await updateOssConfig(this.form);
            } else {
              await addOssConfig(this.form);
            }
            this.$message.success('操作成功');
            this.dialog.visible = false;
            await this.getList();
          } finally {
            this.buttonLoading = false;
          }
        }
      });
    },
    async handleStatusChange(row) {
      const text = row.status === '0' ? '启用' : '停用';
      try {
        await this.$confirm(`确认要"${text}"${row.configKey}配置吗?`);
        await changeOssConfigStatus(row.ossConfigId, row.status, row.configKey);
        await this.getList();
        this.$message.success(`${text}成功`);
      } catch {
        return;
      } finally {
        row.status = row.status === '0' ? '1' : '0';
      }
    },
    async handleDelete(row) {
      const ossConfigIds = row?.ossConfigId || this.ids;
      await this.$confirm(`是否确认删除OSS配置编号为"${ossConfigIds}"的数据项?`);
      this.loading = true;
      try {
        await delOssConfig(ossConfigIds);
        await this.getList();
        this.$message.success('删除成功');
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
/* 样式内容根据需要进行调整 */
</style>
